<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ include file="/WEB-INF/views/include.inc.jsp"%>

<style>
.toolbar{
	margin-top:10px;
	margin-bottom:10px;
}
</style>

<script src="${contextPath}/resources/styles/echarts/echarts.js"></script>

	<div class="toolbar">
	<label>时间段：</label>
	<input type="text" name="search_GT_createTime" value="${param.search_GT_createTime}" class="date textInput readonly valid" datefmt="yyyy-MM-dd HH:mm:ss" readonly="true">
	-<input type="text" name="search_LT_createTime" value="${param.search_LT_createTime}" class="date textInput readonly valid" datefmt="yyyy-MM-dd HH:mm:ss" readonly="true">
	
	<span style="margin-left:30px;">
			分析维度(粒度)：
		<select style="width:150px">
			<option>按实际访问时间统计</option>
			<option>按秒统计</option>
			<option>按分钟统计</option>
			<option>按小时统计</option>
			<option>按天统计</option>
			<option>按月统计</option>
		</select>	
	</span>
	
	<span style="margin-left:30px;">
			分析地址：
		<select style="width:220px">
			<option>1212</option>
			<option>1212</option>
			<option>32323</option>
		</select>	
	</span>
	<div class="button" style="float:right;margin-right: 10px;"><div class="buttonContent"><button type="submit">分析</button></div></div>
	</div>
	
	<div id="main" style="height:450px;"></div>
   
    
    <script type="text/javascript">

    require.config({
        paths: {
            echarts: '${contextPath}/resources/styles/echarts'
        }
    });
    

    require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/line',
            'echarts/chart/map'
        ],
        function (ec) {
            //--- 折柱 ---
            var myChart = ec.init(document.getElementById('main'));
            myChart.setOption({
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['后台执行时间','模板渲染时间']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitArea : {show : true}
                    }
                ],
                series : [
                    {
                        name:'后台执行时间',
                        type:'line',
                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },
                    {
                        name:'模板渲染时间',
                        type:'line',
                        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    }
                ]
            });
            
           
        }
    );
    </script>